<template>
  <div>
    <div class="table-detail2" :style="{height:'600px'}">
      <b-table :items="items" :fields="fields" hover striped>
        <template slot="操作" slot-scope="row">
          <b-button size="sm" class="mr-2" v-b-modal.modal1 @click="add(row.item)">+</b-button>
          <b-button size="sm" class="mr-2" v-b-modal.modal1 @click="reduce(row.item)">-</b-button>
          <b-button size="sm" class="mr-2" v-b-modal.modal1 @click="del(row.item)">删除</b-button>
        </template>
      </b-table>
      <div :style="{marginLeft:'65%'}">总价：{{total}}</div>
      <div :style="{marginLeft:'65%'}">
        <button @click="gotobuy">购买</button>
      </div>
    </div>
  </div>
</template>
<script scoped>
  export default {
    data() {
      return {
        fields:["编号","商品","数量","单价","操作"],
        items:[{}]
      }
    },
    mounted: function() {
      this.items=this.$store.state.buyshopmes;
    },
    components: {},
    computed:{
      total:function () {
        var money=0;
        for(var i=0;i<this.items.length;i++){
            money=this.items[i].数量*this.items[i].单价+money;
        }
        return money;
      }
    },
    methods: {
      gotobuy:function () {
        alert('支付成功');
      },
      add:function (item) {
        var j=0;//记录下标
        var le=this.items.length;
        for(var i=0;i<le;i++){
          if(item.编号==this.items[i].编号){
            j=i;
          }
        }
        this.items[j].数量++;
        //alert(shop);
      },
      reduce:function (item) {
        var j=0;//记录下标
        var le=this.items.length;
        for(var i=0;i<le;i++){
          if(item.编号==this.items[i].编号){
            j=i;
          }
        }
        this.items[j].数量--;
        //alert(item);
      },
      del:function (item) {
        var j=0;//记录下标
        var le=this.items.length;
        for(var i=0;i<le;i++){
          if(item.编号==this.items[i].编号){
            j=i;
          }
        }
        this.items.splice(j, 1);
      }
    }
  };
</script>

<style scoped>

</style>
